<style lang="scss" scoped>
    @import '../../css/resource.scss';
    .bookinfo-abstract{color: #666;font-size: 14px;margin: 16px 0 8px 0;@include maxLine(1, 22px);height: 22px;}
    .apply-btn{width: 160px;font-size: 16px;font-weight: bold;}

    .el-icon-question{margin-left: 4px;color: #aaa;}
    .dialog-big-body{border: 1px solid #eee;}
    .car-head{padding: 18px 24px;background: #fcfdff}
    .check-all{margin-left: 4px;}
    .car-body{padding: 18px 24px;border-top: 1px solid #eee;background: #fff;}
    .car-body:first-child{border-top: none;}
    .car-content{height: 90px;line-height: 90px;text-align: center;}
    .car-title{text-align: center;}
    .book-info{display:-webkit-box;display: box;}
    .avatar-box{display: block;margin-right: 12px;width: 64px;height: 90px;}
    .avatar-box img{width: 100%;height: 100%;}
    .author-box{-webkit-box-flex: 1;box-flex: 1;-webkit-flex: 1;flex: 1;}
    .book-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-bottom: 30px;padding-top: 8px;}
    .author-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999}
    .count-box{display: inline-block;padding-top: 30px;}

    .minus-plus-btn{float: left;border:1px solid #aaa;background: #fcfdff;width: 20px;height: 28px;line-height: 28px;cursor: pointer;}
    .icon-font{font-size: 6px;}
    .book-count{float: left;width: 40px;height: 26px;line-height: 26px;border:none;border-top:1px solid #aaa;border-bottom: 1px solid #aaa;text-align: center;outline: none;}
    .singal-price-box{text-align: center;;padding-top: 12px;}
    .singal-price-box1{text-align: center;padding-top: 20px;}
    .singal-price-box2{text-align: center;padding-top: 32px;}
    .line-box{color: #aaa;}
    .line-box span{text-decoration: line-through;}
    .car-foot{padding: 20px 20px 15px 64px;border-top: 1px solid #eee;}
    .resource-num{color: #000;font-weight: bold;padding-right: 10px;}
    .old-price{padding-right: 10px;}

    .dialog-btn-left{width: 150px;margin: 0 10px 0 -4px;}
    .dialog-btn-right{width: 150px;background: $mco;}
    .dialog-btn-center{width: 150px;background: $mco;}
    .word-dialog-tap{text-align: center;color: #999;}

    .bim-text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .dialog-big-body-head{padding: 12px 20px;background: #fcfdff;border-bottom: 1px solid #eee;position: relative;}
    .dialog-big-body-main{padding: 20px 12px;max-height: 300px;overflow-y: auto}
</style>

<style>
    .add-resource-abel-input .el-input{width: 100%;}
</style>

<template>
    <section>
        <section class="book-box mt">
            <div class="bookinfo-box clearfix">
                <div class="bookinfo-cover fl">
                    <img :src="resourceInfo.ResCover" alt="">
                </div>
                <div class="bookinfo-info">
                    <h6 class="fs-18 bookinfo-infotitle mt">{{resourceInfo.ResName?resourceInfo.ResName:'我是标题'}}</h6>
                    <p class="bookinfo-abstract">{{resourceInfo.ResSubTitle?resourceInfo.ResSubTitle:'我是副标题'}}</p>
                    <div class="bookinfo-minor p-rela">
                        <!-- <div class="bim-count p-abso fs-14 bim-text"><span class="fs-18">{{resourceInfo.ViewNum}}</span><br>阅读人数</div> -->
                        <div class="fs-14 bim-text">
                            可分配人数<span class="bim-num fs-20 ml">{{resourceInfo.Stocks}}</span><i class="el-icon-question" @click="dialogLittle.centerDialogVisible=true"></i>
                        </div>
                        <div class="fs-14 bim-text pt20">
                            <!--<span class="mr">该图书信息</span>-->
                            <span class="mr20">{{ resourceInfo.ResSubCateID == '8' ? '讲师':'作者' }}：{{resourceInfo.Author ? resourceInfo.Author : '暂无'}} </span>
                            <span class="mr20" v-if="resourceInfo.ResSubCateID != 8">出版社：{{resourceInfo.Publisher ? resourceInfo.Publisher : '暂无'}}</span>
                            <span class="mr20" v-if="resourceInfo.ResSubCateID != 8">出版时间：{{resourceInfo.PublishTime ? resourceInfo.PublishTime : '暂无'}}</span>
                        </div>
                    </div>
                    <div class="bookinfo-dobox mt40">
                        <span class="bid-one" @click="addPeople">增加人数</span>
                        <!--<span class="bid-one" @click="gotoPath('/resource/read-book')">阅读</span>-->
                        <el-button type="primary" class="apply-btn" @click="openDistribute" :disabled="resourceInfo.Stocks==0">分配</el-button>
                    </div>
                </div>
            </div>




            <div class="book-tit mt20">
                <span class="booktit-text">书籍简介</span>
            </div>
            <div class="btt-content" v-html="resourceInfo.ResAbstract"></div>

        </section>

        <el-dialog
                :title="dialogBig.title"
                :visible.sync="dialogBig.centerDialogVisible"
                width="700px"
                center>
            <div class="dialog-big-body">
                <el-row class="car-head">
                    <el-col :span="12"><div class="car-title">资源信息</div></el-col>
                    <el-col :span="6"><div class="car-title">数量</div></el-col>
                    <el-col :span="6"><div class="car-title">单价(元)</div></el-col>
                </el-row>
                <template v-for="one,index in buyCarInfo">
                    <el-row class="car-body">
                        <el-col :span="2"><div class="car-content"></div></el-col>
                        <el-col :span="10">
                            <div>
                                <div class="book-info">
                                    <div class="avatar-box"><img :src="one.ResourceCover" alt=""></div>
                                    <div class="author-box">
                                        <div class="book-name">{{one.ResourceName}}</div>
                                        <div class="author-name">{{one.Author}}</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="car-content">
                                <div class="count-box">
                                    <span class="minus-plus-btn" @click="countMinus(one)"><i class="el-icon-minus icon-font"></i></span>
                                    <input type="text" class="book-count" v-model="one.Num" @input="countChange(one)">
                                    <span class="minus-plus-btn" @click="countPlus(one)"><i class="el-icon-plus icon-font"></i></span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="singal-price-box" v-show="one.PriceNumList.length==3">
                                <div :class="{'line-box':Number(one.Num)>Number(one.num1)}">1-{{one.num1}}份：<span>{{Number(one.price1).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(one.Num)<Number(one.num1)+1||Number(one.Num)>Number(one.num2)}">{{Number(one.num1)+1}}-{{one.num2}}份：<span>{{Number(one.price2).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(one.Num)<Number(one.num3)}">≧{{one.num3}}份：<span>{{Number(one.price3).toFixed(2)}}</span></div>
                            </div>
                            <div class="singal-price-box1" v-show="one.PriceNumList.length==2">
                                <div :class="{'line-box':Number(one.Num)>Number(one.num1)}">1-{{one.num1}}份：<span>{{Number(one.price1).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(one.Num)<Number(one.num2)}">≧{{one.num2}}份：<span>{{Number(one.price2).toFixed(2)}}</span></div>
                            </div>
                            <div class="singal-price-box2" v-show="one.PriceNumList.length==1">
                                <div><span>{{Number(one.price1).toFixed(2)}}</span></div>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="car-foot clearfix">
                        <span class="fr">
                            资源数：<span class="resource-num">1</span>商品原价：<span class="old-price">￥{{(one.Num*one.price1).toFixed(2)}}</span>已节省：<span class="resource-num">￥{{(one.Num*one.price1).toFixed(2) - one.allPrice}}</span>合计：<span class="color-orange fw-bold">￥{{one.allPrice}}</span>
                        </span>
                    </div>
                </template>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" @click="dialogBig.centerDialogVisible = false">取 消</el-button>
                <el-button class="dialog-btn-right" type="primary" @click="account">立即支付</el-button>
            </span>
        </el-dialog>

        <el-dialog
                :title="dialogLittle.title"
                :visible.sync="dialogLittle.centerDialogVisible"
                width="460px"
                center>
            <p class="word-dialog-tap"> 可分配人数为该购买的资源未分配的剩余数。<br>
                需要分配给更多的学员，点击“增加人数”购买所需的数量。</p>
            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-center" type="primary" @click="dialogLittle.centerDialogVisible = false">知道了</el-button>
            </span>
        </el-dialog>

        <el-dialog
                :title="dialogBigMember.title"
                :visible.sync="dialogBigMember.centerDialogVisible"
                width="700px"
                center>
            <div class="dialog-big-body">
                <div class="dialog-big-body-head add-resource-abel-input">
                    <el-input
                            prefix-icon="el-icon-search"
                            placeholder="输入关键字进行过滤"
                            v-model="filterText">
                    </el-input>
                </div>
                <div class="dialog-big-body-main">
                    <div v-if="dialogBigMember.centerDialogVisible==true">
                        <el-tree
                                :props="propsName"
                                :data="nameList"
                                node-key="EmployeeID"
                                ref="tree"
                                @check-change="getCheckedNum"
                                :filter-node-method="filterNode"
                                default-expand-all="true"
                                show-checkbox>
                        </el-tree>
                    </div>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" @click="dialogBigMember.centerDialogVisible = false">取 消</el-button>
                <el-button class="dialog-btn-right" type="primary" @click="sureDistribute">确 定</el-button>
            </span>
        </el-dialog>
    </section>

</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            comResID:this.$route.query.ResID||'',
            dialogBig:{
                centerDialogVisible: false,
                title:'资源付费'
            },
            dialogLittle:{
                centerDialogVisible: false,
                title:'提示',
            },
            resourceInfo:{},
            buyCarInfo:[],

            dialogBigMember:{
                centerDialogVisible: false,
                title:'请选择分配成员'
            },
            propsName: {
                label: 'DepartmentName',
                children: 'Child',
                disabled: 'Disable'
            },
            nameList:[],
            employeeIDArr:[],
            filterText: '',
            path: [
                {
                    'name':'资源管理',
                    'path':'/resource/book-list'
                },
                {
                    'name':'我的资源',
                    'path':'/resource/my-resource'
                },

                {
                    'name':'资源详情'
                }
            ],
        }
    },
    mixins: [mixinMethods],
    methods: {
        account(){          //增加人数跳支付页面
            let nowList = [];
            this.buyCarInfo.forEach(item => {
                nowList.push({ResourceID:item.ResourceID,Num:item.Num})
            })
            axios.post('/com/orders/add', qs.stringify({
                orderGoods:nowList,
                orderType:1,
                relationID:0
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$router.push({name:'resourceResourcePay',query:{OID:d.data.OrderID,allCount:this.buyCarInfo[0].allPrice}})
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
        addPeople(){
            axios.post('/com/resource/systemResDetail', qs.stringify({
                resourceID: this.resourceInfo.ResourceID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    let nowResInfo = d.data.ResourceInfo;
                    nowResInfo.PriceNumList = [];
                    nowResInfo.ResourcePrice = eval("("+ nowResInfo.ResourcePrice +")")
                    nowResInfo.ResourcePrice.forEach((one)=>{
                        nowResInfo.PriceNumList.push({price:one.price,countNum:one.num,countBig:String(one.num).split('-')[1]||one.num});
                    })
                    nowResInfo.allPrice = 0;
                    nowResInfo.Num = 1;
                    if(nowResInfo.PriceNumList.length==3){
                        nowResInfo.price1 = nowResInfo.PriceNumList[0].price;
                        nowResInfo.price2 = nowResInfo.PriceNumList[1].price;
                        nowResInfo.price3 = nowResInfo.PriceNumList[2].price;

                        nowResInfo.num1 = Number(nowResInfo.PriceNumList[0].countBig);
                        nowResInfo.num2 = Number(nowResInfo.PriceNumList[1].countBig);
                        nowResInfo.num3 = Number(nowResInfo.PriceNumList[2].countBig);

                        nowResInfo.allPrice = nowResInfo.Num<nowResInfo.num1 ? nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price1).toFixed(2):nowResInfo.Num>nowResInfo.num3?nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price3).toFixed(2):nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price2).toFixed(2);
                    }else if(nowResInfo.PriceNumList.length==2){
                        nowResInfo.price1 = nowResInfo.PriceNumList[0].price;
                        nowResInfo.price2 = nowResInfo.PriceNumList[1].price;

                        nowResInfo.num1 = Number(nowResInfo.PriceNumList[0].countBig);
                        nowResInfo.num2 = Number(nowResInfo.PriceNumList[1].countBig);

                        nowResInfo.allPrice = nowResInfo.Num<nowResInfo.num1 ? nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price1).toFixed(2):nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price2).toFixed(2);
                    }else {
                        nowResInfo.price1 = nowResInfo.PriceNumList[0].price;
                        nowResInfo.allPrice = (nowResInfo.Num*nowResInfo.price1).toFixed(2)
                    }
                    this.buyCarInfo = [nowResInfo];
                }else {
                    this.$message.error(d.msg)
                }
            })


            this.dialogBig.centerDialogVisible = true;
        },
        countMinus(one){
            if(one.Num>1){
                one.Num--;
                if(one.PriceNumList.length==3){
                    one.allPrice = one.Num<=one.num1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.Num<=one.num2?one.allPrice=(one.Num*one.price2).toFixed(2):one.allPrice=(one.Num*one.price3).toFixed(2);
                }else if(one.PriceNumList.length==2){
                    one.allPrice = one.Num<=one.num1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.allPrice=(one.Num*one.price2).toFixed(2);
                }else {
                    one.allPrice = (one.Num*one.price1).toFixed(2)
                }
            }
        },
        countPlus(one){
            one.Num++;
            if (one.PriceNumList.length == 3) {
                one.allPrice = one.Num <= one.num1 ? one.allPrice = (one.Num * one.price1).toFixed(2) : one.Num <= one.num2 ? one.allPrice = (one.Num * one.price2).toFixed(2) : one.allPrice = (one.Num * one.price3).toFixed(2);
            } else if (one.PriceNumList.length == 2) {
                one.allPrice = one.Num <= one.num1 ? one.allPrice = (one.Num * one.price1).toFixed(2) : one.allPrice = (one.Num * one.price2).toFixed(2);
            } else {
                one.allPrice = (one.Num * one.price1).toFixed(2)
            }
        },
        countChange(one){
            if(Number(one.Num)<1){
                one.Num = 1;
                one.allPrice = (one.Num * one.price1).toFixed(2)
            }else {
                if (one.PriceNumList.length == 3) {
                    one.allPrice = one.Num <= one.num1 ? one.allPrice = (one.Num * one.price1).toFixed(2) : one.Num <= one.num2 ? one.allPrice = (one.Num * one.price2).toFixed(2) : one.allPrice = (one.Num * one.price3).toFixed(2);
                } else if (one.PriceNumList.length == 2) {
                    one.allPrice = one.Num <= one.num1 ? one.allPrice = (one.Num * one.price1).toFixed(2) : one.allPrice = (one.Num * one.price2).toFixed(2);
                } else {
                    one.allPrice = (one.Num * one.price1).toFixed(2)
                }
            }
        },
        traverseTree(node){     //递归遍历获得的树形结构
            if (!node) {
                return;
            }
            if(node.Disable && node.Disable==true){
                node.DepartmentName = node.DepartmentName + '【已分配】'
            }
            if (node.Child && node.Child.length > 0) {
                var i = 0;
                for (i = 0; i < node.Child.length; i++) {
                    this.traverseTree(node.Child[i]);
                }
            }
        },
        openDistribute(){
            let self = this;
            axios.post('/com/com-res/distributeTree', qs.stringify({
                comResID:this.comResID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    var nowTreeObj = d.data.Row[0];
//                    this.traverseTree(nowTreeObj)     //递归遍历获得的树形结构
                    self.nameList = d.data.Row;
                    this.$refs.tree.setCheckedKeys(self.employeeIDArr);
                }else {
                    this.$message.error(d.msg)
                }
            })
            this.dialogBigMember.centerDialogVisible = true;
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.DepartmentName.indexOf(value) != -1;
        },
        getCheckedNum(data,check,child){
            let arrGoted = this.$refs.tree.getCheckedNodes();
            let IDArr = [];
            arrGoted.forEach(item=>{
                if(item.EmployeeID!=0){
                    IDArr.push(item.EmployeeID)
                }
            });
            this.employeeIDArr = IDArr;
            if(this.resourceInfo.Stocks== IDArr.length){
                this.$message.warning('这是最后一个可分配人数名额了哦');
            }
            if(this.resourceInfo.Stocks < IDArr.length){
                this.$message.error('选择人员数超过可分配人数');
                return
            }
        },
        sureDistribute(data,check,child){
            axios.post('/com/com-res/distributeRes', qs.stringify({
                comResID: this.comResID,
                employeeIDStr:this.employeeIDArr.join(',')
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.dialogBigMember.centerDialogVisible = false;
                    this.$message.success('分配成功')
                    this.getInitInfo()
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
        getInitInfo(){
            axios.post('/com/com-res/comResDetail', qs.stringify({
                comResID: this.comResID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.resourceInfo = d.data.ComResInfo;
                }else {
                    this.$message.error(d.msg)
                }
            })
        }
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)
        this.getInitInfo()
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
}


</script>
